<template>
<view class="generalbox">
  <image src="../../static/img01/back1.png" class="commodityimg" @click="goBack"></image>
  <view class="task">
    
    <view class="tasknav">升级局长</view>
  </view>
  <view class="headerbox"
    style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/generalback.png?sign=5ed35d2182b66a8c5ba51e41c9d114cf&t=1608346446')">
    <view class="headertext">众多局长特权，仅需{{info.price}}元</view>
  </view>
  <view class="equitybox">
    <view class="equity">
      <view class="equityradius"></view>
      <view class="equitytext">局长特权</view>
      <view class="equityradius"></view>
    </view>
    <view class="equityclass">
      <view class="box">
        <view class="equityimg"
          style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/generalicon1.png?sign=7c31b2ed44d9d16e98e0eb4fdc0c4975&t=1608348106')">
        </view>
        <view class="boxtext">专属收益</view>
      </view>
      <view class="box">
        <view class="equityimg1"
          style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/generalicon.png?sign=0925fdec1a83f37a39a0e735adadf23f&t=1608348095')">
        </view>
        <view class="boxtext">旅游套餐</view>
      </view>
    </view>
  </view>
  <view style="width:100%;height:20rpx;background:#f1f1f1"></view>
  <view class="detailsbox">
    <view class="equity1">
      <view class="equityradius"></view>
      <view class="equitytext">局长权益详情</view>
      <view class="equityradius"></view>
    </view>
  <view class="detailsimg" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/generalnei.png?sign=ecc0520adf0085279cf36f297e56eb26&t=1608349742')">
    <view class="detailstext">专属权益</view>
    <view class="detailstext1">•提高抢红包手气值300</view>
    <view class="detailstext111">•推荐奖励(咨询猜猜熊官方客服)</view>
    <view class="detailstext11">•补贴区引流红包提升到6元/单</view>
  </view>
  <view class="detailsimg1" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/generalnei.png?sign=ecc0520adf0085279cf36f297e56eb26&t=1608349742')">
    <view class="detailstext2">旅游套餐</view>
    <view class="textbox">
      <view class="text">将获得{{sum}}张免费旅游卡（快递送达）</view>
      <view class="text">其中包含：</view>
      <view class="text">
        <view class="yuan"></view>
        <view class="text">双线旅行卡{{sum}}张（含住宿）</view>
      </view>
      <view class="text">•七彩云南6天5晚游</view>
      <view class="text">
        <view class="yuan"></view>
        <view class="text">•浪漫海南5天4晚游</view>
      </view>
      <view class="text"> 说明:该旅游产品为局长权益赠品，不退不换。</view>
    </view>
  </view>
  </view>
  <view style="width:100%;height:20rpx;background:#f1f1f1"></view>
<view class="travelbox">
  <view class="equity1">
      <view class="equityradius"></view>
      <view class="equitytext">旅游套餐详情</view>
      <view class="equityradius"></view>
    </view>
    <view class="equity2" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/yunantext.png?sign=be8d4fa53ce90c0a8e391320c7a05173&t=1608608332')">
      
    </view>
    <image class="deimg" mode="widthFix" src="https://guess-9gpx4635bd56e954.6775-guess-9gpx4635bd56e954-1304086925/yunnande1.jpg"></image>
    <view class="equity3" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/hainantext.png?sign=2cba71ce3887f52b548be5b399cf5f3d&t=1608608342')">
      
    </view>
    <image class="deimg" mode="widthFix" src="https://guess-9gpx4635bd56e954.6775-guess-9gpx4635bd56e954-1304086925/hannande.jpg"></image>
    
</view>

<view style="width:100%;height:120rpx;"></view>
  <view class="pay" @click="pay">支付{{info.price}}元</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
                info: {},
                sum: "",
			}
		},
		methods: {
			pay() {
                uni.navigateTo({
                    url: "../payment/payment?item="+JSON.stringify(this.info)
                })
            },
            goBack() {
                uni.navigateBack()
            }
		},
        onLoad({item}) {
            let info = this.info = JSON.parse(item);
            if(info.price == 999){
              this.sum = '一';
            }else{
              this.sum = '六';
            }
        }
	}
</script>

<style>
/* pages/general/general.wxss */
.generalbox{
  width: 100%;
  height: 100%;
}
page{
  height: 100%;
}
.task{
  width: 100%;
  height: 150rpx;
  position: absolute;
  margin-bottom: 30rpx;
  z-index: 1;
}
.commodityimg{
  width: 118rpx;
  height: 64rpx;
  position: fixed;
  top: 90rpx;
  left: 0;
  z-index: 9;
}
.tasknav{
  text-align: center;
  font-size: 38rpx;
  font-weight: 550;
  color: white;
  transform: translateY(90rpx);
}
.headerbox{
  width: 100%;
  height: 468rpx;
  background:white no-repeat center center/100%;
  position: relative;
}
.headertext{
  font-size: 40rpx;
  width: 600rpx;
  text-align: center;
  position: absolute;
  bottom: 50rpx;
  font-weight: 550;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: white;
  text-shadow: #ffa506 1px 0 0, #ffa506 0 1px 0, #ffa506 -1px 0 0, #ffa506 0 -1px 0
  /* -webkit-text-stroke:1px #ffa506 */
}
.equitybox{
    width: 100%;
    margin-top: 30rpx;
    height: 260rpx;
}
.equity{
  width: 37%;
  height: 50rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.equity1{
  width: 50%;
  height: 50rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.equityradius{
  width: 34rpx;
  height: 34rpx;
  margin-top: 8rpx;
  border-radius: 50%;
background: linear-gradient(0deg, #FFA506 0%, #FFDA29 100%);
}
.equitytext{
  font-size: 40rpx;
  font-weight: 550;
  line-height: 50rpx;
}
.equitytext1{
  font-size: 40rpx;
  font-weight: 550;
  line-height: 50rpx;
}
.equityclass{
  width: 100%;
  height: 140rpx;
  margin-top: 40rpx;
  display: flex;
  justify-content: space-around;
}
.box{
  width: 150rpx;
  height: 140rpx;
  text-align: center;
}
.equityimg{
  width: 72rpx;
  height: 80rpx;
  margin: 0 auto 20rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.equityimg1{
  width: 100rpx;
  height: 60rpx;
  margin: 0 auto 40rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.boxtext{
  font-size: 28rpx;
  color: #999;
}
.detailsbox{
  width: 100%;
  height:560rpx;
  padding-top: 30rpx;
  background: white;
}
.detailsimg{
  width: 90%;
  height: 140rpx;
  margin: 30rpx auto;
  display: flex;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.detailstext{
  line-height:140rpx;
  margin-left: 20rpx;
  font-size: 32rpx;
  color: #F39600;
  font-weight: 550;
}
.detailstext1{
  color: #F39600;
  font-size: 22rpx;
  position: absolute;
  left: 28%;
 top: 15%;
}
.detailstext111{
  color: #F39600;
  font-size: 22rpx;
  position: absolute;
  left: 28%;
 top: 40%;
}
.detailstext11{
  color: #F39600;
  font-size: 22rpx;
  position: absolute;
  left: 28%;
top: 65%;
}
.detailsimg1{
  width: 90%;
  height: 264rpx;
  margin: 30rpx auto;
  display: flex;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.detailstext2{
  line-height:264rpx;
  margin-left: 20rpx;
  font-size: 32rpx;
  color: #F39600;
  font-weight: 550;
}
.textbox{
  width: 70%;
  height: 240rpx;
  position: absolute;
  left: 28%;
  top: 20rpx;
  color: #F39600;
}
.text{
  font-size: 24rpx;
  display: flex;
  flex-wrap: wrap;

}
.protocolbox{
  width: 65%;
  height: auto;
  margin: 0 auto 30rpx;
  display: flex;
  justify-content: space-around;
}
.protocoltext{
  font-size:26rpx;
  color: #808080;
  margin-top: 4rpx;
}
.protocol{
  font-size: 26rpx;
  color:#F60A60;
}
.pay{
  width: 95%;
  height: 80rpx;
  position: fixed;
  bottom: 30rpx;
  left: 0;
  right: 0;
  border-radius: 40rpx;
  background: linear-gradient(0deg, #F40059 0%, #FF3881 100%);
  box-shadow: 0px 8px 7px 0px rgba(173, 0, 106, 0.13);
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: white;
  margin: 0 auto;
}
.equity2{
  width: 97%;
  height: 60rpx;
  margin: 50rpx auto;
  background: no-repeat center center/100%;
}
.equity3{
  width: 97%;
  height: 104rpx;
  margin: 50rpx auto;
  background: no-repeat center center/100%;
}

.english{
  line-height: 40rpx;
  font-size: 26rpx;

}
.travelbox{
  width: 100%;
  min-height: 150rpx;
  padding-top: 30rpx;
}
.deimg{
  width: 100%;
  height: auto;
}
</style>
